import React from 'react';
import {
    WeaDialog, WeaTab, WeaLeftRightLayout, WeaLocaleProvider
} from 'ecCom';
import { Button, Row, Menu } from 'antd';
import { observer } from 'mobx-react';
import FormatterSettingDialog from './FormatterSettingDialog';
import Common from './formatter/commonformatter'
import ValueFormatter from "./formatter/valueformatter";
import HuobiFormatter from "./formatter/huobiformatter";
import KuaijiFormatter from "./formatter/kuaijiformatter";
import DateFormatter from "./formatter/dateformatter";
import TimeFormatter from "./formatter/timeformatter";
import PercentFormatter from "./formatter/percentformatter";
import FenshuFormatter from "./formatter/fenshuformatter";
import KexuejishuFormatter from "./formatter/kexuejishuformatter";
import TextFormatter from "./formatter/textformatter";
import SpecialFormatter from "./formatter/specialformatter";
import CustomFormatter from "./formatter/customformatter";
import "./formatterSetting.less"
const getLabel = WeaLocaleProvider.getLabel;

export const CellType = {
    Const : 'Const',
    Field : 'Field',
    Formula : 'Formula',
    DateTime : 'DateTime',
    SequenceNumber : 'SequenceNumber'
}

@observer
export default class DataFormatterDialog extends FormatterSettingDialog {
    constructor(props) {
        super(props);
        this.cellType = CellType.Field;
    }

    selectLeftCell = () => {

    }
    selectTopCell = () => {

    }
    
    render() {
        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@p97p0q`}
                visible={this.mainVisible}
                title={getLabel('527405','单元格格式')}
                icon="icon-coms02-Data-center"
                iconBgcolor="#1a57a0"
                buttons={[
                <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@9z920w@onOk`} onClick={this.onOk} type="primary">{getLabel('527407','确定') }</Button>,
                <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@pc9fyd@cancel`} onClick={this.cancel}>{getLabel('527408','取消') }</Button>
                ]}
                hasScroll={true}
                draggable={true}
                parentClassName="edc-report-dialog"
                style={{ width: 600, height: 480, overFlow: "hidden" }}
                onCancel={this.cancel}
            >
                <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@5p9ize`}
                    datas={[{ "title": getLabel('528695','数字') , "key": "0" }]}
                    selectedKey={"0"}
                    showSearchAd={false}
                    keyParam="key"
                />
                {/* <Row>分类：</Row> */}
                <div style={{ height: 361, border: '1px solid #eaeaea' }} >
                    <WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@pk51na`}
                        isNew={true}
                        leftWidth={200}

                        showBtn={false}
                        leftCom={<div>
                            <Menu ecId={`${this && this.props && this.props.ecId || ''}_Menu@di3gz0`}
                                onClick={this.onClickFormatterType}
                                selectedKeys={[this.selectFormatterType]}
                            >
                                {this.FormatterType.map(menu => (
                                    <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_undefined@198736@${menu.key}`} key={menu.key} className="edc-report-typeitem">
                                    <span>{menu.showname}</span>
                            </Menu.Item>
                        ))}
                                {/* <Menu.Item key="1"
                                    className="edc-report-typeitem">
                                    <span>Option 1</span>
                                </Menu.Item>
                                <Menu.Item key="2" className="edc-report-typeitem">
                                    <span>Option 2</span>
                                </Menu.Item>
                                <Menu.Item key="3">
                                    <span>Option 3</span>
                                </Menu.Item> */}
                            </Menu>

                        </div>}
                    >
                        <div>
                        {this.selectFormatterType === 'common' && <Common ecId={`${this && this.props && this.props.ecId || ''}_Common@1vz9os`}></Common>}
                        {this.selectFormatterType === 'value' && <ValueFormatter ecId={`${this && this.props && this.props.ecId || ''}_ValueFormatter@1wq2v4`} store ={this}></ValueFormatter>}
                        {this.selectFormatterType === 'huobi' && <HuobiFormatter ecId={`${this && this.props && this.props.ecId || ''}_HuobiFormatter@z0xcq6`} store ={this}></HuobiFormatter>}
                        {this.selectFormatterType === 'kuaiji' && <KuaijiFormatter ecId={`${this && this.props && this.props.ecId || ''}_KuaijiFormatter@c6cw9k`} store ={this}></KuaijiFormatter>}
                        {this.selectFormatterType === 'date' && <DateFormatter ecId={`${this && this.props && this.props.ecId || ''}_DateFormatter@a0a1a6`} store ={this}></DateFormatter>}
                        {this.selectFormatterType === 'time' && <TimeFormatter ecId={`${this && this.props && this.props.ecId || ''}_TimeFormatter@cqm1nc`} store ={this}></TimeFormatter>}
                        {this.selectFormatterType === 'percent' && <PercentFormatter ecId={`${this && this.props && this.props.ecId || ''}_PercentFormatter@j9dofo`} store ={this}></PercentFormatter>}
                        {this.selectFormatterType === 'fenshu' && <FenshuFormatter ecId={`${this && this.props && this.props.ecId || ''}_FenshuFormatter@zz07em`} store ={this}></FenshuFormatter>}
                        {this.selectFormatterType === 'kexuejishu' && <KexuejishuFormatter ecId={`${this && this.props && this.props.ecId || ''}_KexuejishuFormatter@y46xze`} store ={this}></KexuejishuFormatter>}
                        {this.selectFormatterType === 'text' && <TextFormatter ecId={`${this && this.props && this.props.ecId || ''}_TextFormatter@ynrrpw`}></TextFormatter>}
                        {this.selectFormatterType === 'special' && <SpecialFormatter ecId={`${this && this.props && this.props.ecId || ''}_SpecialFormatter@s5tze6`} store ={this}></SpecialFormatter>}
                        {this.selectFormatterType === 'custom' && <CustomFormatter ecId={`${this && this.props && this.props.ecId || ''}_CustomFormatter@qpr3lr`}  store ={this}></CustomFormatter>}

                        </div>
                    </WeaLeftRightLayout>
                </div>
                <div>
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@x46ogi`} className="edcreport-bottom-remark">{this.getbottomRemark}</Row>
                </div>
            </WeaDialog>
        )
    }
}